<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" th:href="@{/adminlte/layui/css/layui.css}"  media="all"/>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!--<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>-->
<!--<h3 style="margin-top: -10px; margin-left:-10px;">检测入库</h3>-->
<div class="demoTable">
    采购商编号：
    <div class="layui-inline" style="width: 220px">
        <input class="layui-input"  id="purchaserNums" autocomplete="off" style="width: 200px;height: 25px" placeholder="请输入采购商编号"/>

    </div>
    所在地区：
    <div class="layui-inline" style="width: 220px">
            <select name="cityP" lay-verify=""  style="width: 210px">
                <option value="" >请选择所在地区</option>
            </select>
    </div>
    采购商名称：
    <div class="layui-inline" style="width: 220px">
        <input class="layui-input"  id="purchaserName" autocomplete="off" style="width: 200px;height: 25px" placeholder="请输入采购商名称"/>
    </div>
    <button class="layui-btn layui-btn-sm" data-type="reload">查询</button><br/>
</div>
<div id="add-mainPurchaser" style="display: none;">
    <div class="my-form">
        <form class="layui-form"  lay-skin="line">
            <div class="layui-form-item my-form-item" style="margin-top: 10px">
                <label class="layui-form-label layui-icon" style="width: 170px"><p style="color: red;display: inline">&#xe67a;</p>采购商编号:</label>
                <div class="layui-input-inline">
                    <input id="purchaserNumsAdd" type="text" name="purchaserNumsAdd"  readonly="readonly"  lay-verify="required" placeholder="请输入采购商编号" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item" style="margin-top: 10px">
                <label class="layui-form-label layui-icon" style="width: 170px"><p style="color: red;display: inline">&#xe67a;</p>所在地区:</label>
                <div class="layui-input-inline">
                    <input id="localP" type="text" name="localP" lay-verify="required" placeholder="请输入所在地区" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item my-form-item">
                <label class="layui-form-label layui-icon" style="width: 170px"><p style="color: red;display: inline">&#xe67a;</p>采购商名称:</label>
                <div class="layui-input-inline">
                    <input id="purchaserNameAdd" type="text" name="purchaserName" lay-verify="required" placeholder="请输入采购商名称" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">燃气集团:</label>
                <div class="layui-input-inline">
                    <input id="gasGroup" type="text" name="gasGroup" lay-verify="required" placeholder="请输入燃气集团" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">联系人:</label>
                <div class="layui-input-inline">
                    <input id="contactsP" type="text" name="contactsP" lay-verify="required" placeholder="请输入联系人" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">联系电话:</label>
                <div class="layui-input-inline">
                    <input id="telP" type="text" name="telP" lay-verify="required" placeholder="请输入联系电话" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">IP地址:</label>
                <div class="layui-input-inline">
                    <input id="ipAddress" type="text" name="ipAddress" lay-verify="required" placeholder="请输入IP地址" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">端口号:</label>
                <div class="layui-input-inline">
                    <input id="ipPort" type="text" name="ipPort" lay-verify="required" placeholder="请输入端口号" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
         <!--   <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">&#xe642;邮箱地址:</label>
                <div class="layui-input-inline">
                    <input id="email" type="text" name="email" lay-verify="required" placeholder="请输入物料流水号止" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>-->
            <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">详细地址:</label>
                <div class="layui-input-inline">
                    <input id="localMoreP" type="text" name="localMoreP" lay-verify="required" placeholder="请输入详细地址" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
            <div class="layui-form-item my-form-item" >
                <label class="layui-form-label layui-icon"  style="width: 170px">备注:</label>
                <div class="layui-input-inline">
                    <input id="remarksP" type="text" name="remarksP" lay-verify="required" placeholder="请输入备注" autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/html" id="toolbarDemoPurchaser">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addPurchaser"  >添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="updatePurchaser" >修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="deletePurchaser">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="uploadPurchaser" id="uploadPurchaser" >导入</button>
    </div>
</script>
<table class="layui-table" lay-data="{url:'/purchaserData', page:true, id:'idTestPurchaser',toolbar:'#toolbarDemoPurchaser',defaultToolbar:['filter', 'print','exports'] }" lay-filter="demoPurchaser">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'purchaserNums', width:150}">采购商编号</th>
        <th lay-data="{field:'local', width:150, sort: true}">所在地区</th>
        <th lay-data="{field:'purchaserName', width:180}">采购商名称</th>
        <th lay-data="{field:'gasGroup', width:150}">燃气集团</th>
        <th lay-data="{field:'contacts', width:150 }">联系人</th>
        <th lay-data="{field:'tel', width:150}">联系电话</th>
        <th lay-data="{field:'localMore', width:180 }">详细地址</th>
        <th lay-data="{field:'ipAddress', width:150}">IP地址</th>
        <th lay-data="{field:'ipPort', width:150}">端口号</th>
        <th lay-data="{field:'operator', width:150}">操作人</th>
        <th lay-data="{field:'operatorTime', width:180}">操作时间</th>
        <th lay-data="{field:'remarks', width:300}">备注</th>
    </tr>
    </thead>
</table>

<script th:src="@{/adminlte/layui/layui.all.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demoPurchaser)', function(obj){
            console.log(obj)
        });
        //监听头工具栏事件
        table.on('toolbar(demoPurchaser)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data//获取选中的数据
                ,deList=[1];
            data.forEach(function (n,i) {
                deList.push(n.id)
            });
            deList.push(2);
            switch(obj.event){
                case 'addPurchaser':
                    layer.open({
                        type:1,
                        title:'添加',
                        btnAlign: 'c',
                        area: ['500px', '600px'],
                        content: $("#add-mainPurchaser"),
                        btn:['保存','取消'],
                        yes:function(index,layero){
                            var local =top.$('#localP').val();
                            var purchaserNameAdd =top.$("#purchaserNameAdd").val();
                            var purchaserNumsAdd =top.$("#purchaserNumsAdd").val();
                            var gasGroup =top.$("#gasGroup").val();
                            var contacts =top.$("#contactsP").val();
                            var ipAddress =top.$("#ipAddress").val();
                            var ipPort =top.$("#ipPort").val();
                            var localMore =top.$("#localMoreP").val();
                            var remarks =top.$("#remarksP").val();
                            var tel =top.$("#telP").val();
                            if (local==""||purchaserNameAdd==""||purchaserNumsAdd==""){
                             /*   alert("您还有必填项未填！")*/
                                layer.msg('您还有必填项未填！', {
                                    btnAlign: 'c',
                                    time: 3000, //20s后自动关闭
                                    btn: ['确定']
                                });
                            }else{
                                $.ajax({
                                    //几个参数需要注意一下
                                    type: "POST",//方法类型
                                    dataType: "json",//预期服务器返回的数据类型
                                    url: "/addPurchaser" ,//url
                                    data: {local:local,purchaserName:purchaserNameAdd,purchaserNums:purchaserNumsAdd,gasGroup:gasGroup,contacts:contacts,ipAddress:ipAddress,ipPort:ipPort,localMore:localMore,remarks:remarks,tel:tel},
                                    success: function (result) {
                                        console.log(result);//打印服务端返回的数据(调试用)
                                        if (result.success >0) {
                                            layer.msg('操作成功', {
                                                btnAlign: 'c',
                                                time: 3000, //20s后自动关闭
                                                btn: ['确定']
                                            });
                                            table.reload('idTestPurchaser');
                                        }else{
                                            layer.msg('操作失败', {
                                                btnAlign: 'c',
                                                time: 3000, //20s后自动关闭
                                                btn: ['确定']
                                            });
                                        }
                                    },
                                    error : function() {
                                        alert("异常！");
                                    }
                                });

                                layer.close(index);
                            }

                        },
                        btn2:function (index) {
                            layer.close(index);
                        }
                    })
                    break;
                case 'updatePurchaser':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        var id =checkStatus.data[0].id;
                        layer.open({
                            type:1,
                            title:'修改',
                            btnAlign: 'c',
                            area: ['500px', '600px'],
                            content: $("#add-mainPurchaser"),
                            btn:['保存','取消'],
                            success:function (layero, index) {
                                top.$('#localP').val(checkStatus.data[0].local);
                                top.$('#purchaserNameAdd').val(checkStatus.data[0].purchaserName);
                                top.$('#purchaserNumsAdd').val(checkStatus.data[0].purchaserNums);
                                top.$('#gasGroup').val(checkStatus.data[0].gasGroup);
                                top.$('#contactsP').val(checkStatus.data[0].contacts);
                                top.$('#ipAddress').val(checkStatus.data[0].ipAddress);
                                top.$('#ipPort').val(checkStatus.data[0].ipPort);
                                top.$('#localMoreP').val(checkStatus.data[0].localMore);
                                top.$('#remarksP').val(checkStatus.data[0].remarks);
                                top.$('#telP').val(checkStatus.data[0].tel);
                            },
                            yes:function(index,layero){
                                var local =top.$('#localP').val();
                                var purchaserNameAdd =top.$("#purchaserNameAdd").val();
                                var purchaserNumsAdd =top.$("#purchaserNumsAdd").val();
                                var gasGroup =top.$("#gasGroup").val();
                                var contacts =top.$("#contactsP").val();
                                var ipAddress =top.$("#ipAddress").val();
                                var ipPort =top.$("#ipPort").val();
                                var localMore =top.$("#localMoreP").val();
                                var remarks =top.$("#remarksP").val();
                                var tel =top.$("#telP").val();
                                if (local==""||purchaserNameAdd==""||purchaserNumsAdd==""){
                                  /*  alert("您还有必填项未填！")*/
                                    layer.msg('您还有必填项未填！', {
                                        btnAlign: 'c',
                                        time: 10000, //20s后自动关闭
                                        btn: ['确定']
                                    });
                                }else{
                                    $.ajax({
                                        //几个参数需要注意一下
                                        type: "POST",//方法类型
                                        dataType: "json",//预期服务器返回的数据类型
                                        url: "/updatePurchaser" ,//url
                                        data: {local:local,purchaserName:purchaserNameAdd,purchaserNums:purchaserNumsAdd,gasGroup:gasGroup,contacts:contacts,ipAddress:ipAddress,ipPort:ipPort,localMore:localMore,remarks:remarks,tel:tel,id:id},
                                        success: function (result) {
                                            console.log(result);//打印服务端返回的数据(调试用)
                                            if (result.success >0) {
                                                layer.msg('操作成功', {
                                                    btnAlign: 'c',
                                                    time: 3000, //20s后自动关闭
                                                    btn: ['确定']
                                                });
                                                table.reload('idTestPurchaser')
                                            }else{
                                                layer.msg('操作失败', {
                                                    btnAlign: 'c',
                                                    time: 3000, //20s后自动关闭
                                                    btn: ['确定']
                                                });
                                            }
                                        },
                                        error : function() {
                                            alert("异常！");
                                        }
                                    });
                                    layer.close(index);
                                }

                            },
                            btn2:function (index) {
                                layer.close(index);
                            }
                        })
                    }
                    break;
                case 'deletePurchaser':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('确定删除',{btn: ['确定', '取消'], title: "提示"},function(index){
                            $.ajax({
                                //几个参数需要注意一下
                                type: "POST",//方法类型
                                dataType: "json",//预期服务器返回的数据类型
                                url: "/deletePurchaser" ,//url
                                data: {deList:JSON.stringify(deList)},
                                success: function (result) {
                                    if (result.success>0) {
                                        layer.msg('操作成功', {
                                            btnAlign: 'c',
                                            time: 3000, //20s后自动关闭
                                            btn: ['确定']
                                        });
                                        table.reload('idTestPurchaser')
                                    }else{
                                        layer.msg('操作失败', {
                                            btnAlign: 'c',
                                            time: 3000, //20s后自动关闭
                                            btn: ['确定']
                                        });
                                    }
                                }/*,
                                error : function() {
                                    alert("异常！");
                                }*/
                            });
                            layer.close(index);
                        });
                    }
                    break;
            }
        });
        var $ = layui.$, active = {
            reload:function () {
                var purchaserNums=$('#purchaserNums').val();
                var local=$("[name='cityP']").val();
                var purchaserName=$('#purchaserName').val();
                table.reload('idTestPurchaser',{
                    url:'/search',
                    where:{purchaserNums:purchaserNums,local:local,purchaserName:purchaserName}  ,
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                })
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    layui.use(['upload'],function(){
        var $ = layui.jquery,
            upload = layui.upload;
//指定允许上传的文件类型
        upload.render({
            elem: '#uploadPurchaser'
            ,url: '/purchaser/upload'
            ,accept: 'file' //普通文件
            ,exts: 'xlsx' //只允许上传excel文件
            ,done: function(res){
                if(res.code == 0){ //上传成功
                    layer.msg(res.msg);
                    table.reload('idTest')
                }else{
                    layer.msg('上传失败');
                }
            }
            ,error: function(index, upload){
                layer.msg('上传失败');
            }
        });
    });
    $(
        function () {
            loadSelect();
            selectMax();
        }
    )
    function selectMax() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/selectMax" ,//url
            success: function (result) {
                if (result.success>0) {
                    $("#purchaserNumsAdd").val(result.max);
                   console.log(result.max);
                }else{
                    /*  alert("系统错误");*/
                }
            }/*,
            error : function() {
                alert("异常！");
            }*/
        });
    }
    function loadSelect() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/local" ,//url
            success: function (result) {
                if (result.success>0) {
                   var list =result.date;
                   $.each(list,function (i,val) {
                       console.log(i+'```````'+val);
                       $("[name='cityP']").append("<option value="+val+">"+val+"</option>");
                   });
                }else{
                  /*  alert("系统错误");*/
                }
            }/*,
            error : function() {
                alert("异常！");
            }*/
        });

    }
    var unSelected = "#999";
    var selected = "#333";
    $(function () {
        $("select").css("color", unSelected);
        $("option").css("color", selected);
        $("select").change(function () {
            var selItem = $(this).val();
            if (selItem == $(this).find('option:first').val()) {
                $(this).css("color", unSelected);
            } else {
                $(this).css("color", selected);
            }
        });
    })
</script>

</body>
</html>